import { Tooltip } from 'antd';
import moment from 'moment';
import React from 'react';
import CommonListsIndex from 'src/components/CommonLists/index';
import FilterTool from 'src/components/FilterTool';
import LogDetail from './detail';
import UserList from './list';
export default class EventLog extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'eventLog';
    this.editComponent = LogDetail;
    this.listsComponent = UserList;
    this.queryParams = {};
    this.initQueryPanigation = {
      current_page: 1,
      page_size: 10,
    };
    this.state = {
      ...this.state,
      field_ids: [], // 已勾选的字段，复制要用
      applications: [],
    };
    if (this.app_id) {
      this.queryTableParams.app_id = this.app_id;
    }
    if (this.event_id) {
      this.queryTableParams.event_id = this.event_id;
    }
    if (this.is_system) {
      this.queryTableParams.is_system = this.is_system;
    }
    this.model_width = 800;
  }
  componentDidMount() {
    this.getAppCodeList();
  }

  getColumns = () => {
    return [
      {
        title: '请求时间',
        key: 'req_time',
        dataIndex: 'req_time',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle('所属渠道', this.state.applications, 'app_id', this.refreshTableFilterWithApp, [
              'app_id',
              'app_name',
            ])}
          </>
        ),
        key: 'app_key',
        dataIndex: 'app_key',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle('关联事件', this.state.events, 'event_id', this.refreshTableFilter, [
              'event_id',
              'event_name',
            ])}
          </>
        ),
        key: 'event_code',
        dataIndex: 'event_code',
        ellipsis: true,
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },

      {
        title: '请求ID',
        key: 'req_id',
        dataIndex: 'req_id',
        render: (text) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
    ];
  };

  clearSelected = () => {
    this.setState({
      field_ids: [],
    });
  };

  render() {
    const ListsComponent = this.listsComponent;
    // 字段选择配置

    const data = [
      {
        type: 'rangepicker',
        key: 'start',
        name: ['between_start_req_time', 'between_end_req_time'],
        defaultValue: [
          moment()
            .subtract(7, 'day')
            .startOf('day')
            .format('YYYY-MM-DD HH:mm:ss'),
          moment().format('YYYY-MM-DD HH:mm:ss'),
        ],
        placeholder: ['开始时间', '结束时间'],
      },
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入关键信息进行搜索',
      },
    ];
    return (
      <div>
        <FilterTool
          ref='filterTool'
          data={data}
          colNum={1}
          query={this.freshQueryList}
          refreshFilter={this.refreshFilter}
          isOnChange={true}
          refresh={this.resetList}
        />
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            rowKey='req_id'
            edit={this.edit}
            queryList={this.freshQueryList}
            clearSelected={this.clearSelected}
            columns={this.getColumns()}
            onChangePagination={this.onChangePagination}
          />
        </div>
      </div>
    );
  }
}
